<template>
  <div>
    <div style="margin: 0 auto; width: 40px; height: 40px; padding-top: 50px">
      <img src="../img/icon.png" alt="" width="100%" height="100%" />
    </div>

    <div
      style="
        width: 334px;
        height: 350px;
        border-radius: 30px;
        background-color: white;
        margin: 30px auto;
      "
    >
      <ul style="padding: 0 30px">
        <li>
          <h4 style="display: flex; justify-content: center; padding-top: 30px">
            关于我
          </h4>
        </li>
        <li>
          <p>为什么要使用该服务？</p>
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>
        </li>
        <li>
          <p>您的职位是？</p>
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option2" />
          </van-dropdown-menu>
        </li>
        <li style="margin-top: 15px;">
            <p>你确定使用该服务吗？</p>
          <van-radio-group v-model="checked" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </li>
      </ul>
    </div>

    <div style="display: flex; justify-content: space-between; padding: 0 30px">
        <p style="color: #3f8cff;" @click="last">上一步</p>
      <van-button
        round
        type="primary"
        style="width: 145px; height: 48px"
        @click="geNest"
        >
        下一步
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const value1 = ref(0);
const checked = ref('1');
const option1 = [
  { text: "工作", value: 0 },
  { text: "学习", value: 1 },
  { text: "生活", value: 2 },
];
const option2 = [
  { text: "公司高管", value: 0 },
  { text: "后端", value: 1 },
  { text: "全栈", value: 2 },
];

const geNest = () => {
  router.push({
    path: "/mygs",
  });
};
const last = () => {
   //返回上一个
  router.go(-1);
}
</script>

<style lang="scss" scoped></style>
